<template>
    <div class="side-menu" @click="sideHide">
        <ul>
            <router-link tag="li" v-for="l in list" :to="l.uri">
                {{l.name}}
                <i class="icon-chevron-right"></i>
            </router-link>
            </ul>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                list: [
                    { name: "首页", uri: "/" },
                     {name:"发现",uri:"/find"},
                     {name:"V社区",uri:"/communlity"},
                     {name: "我的", uri: "/user" },
                     {name:"人气排行榜",uri:"/moods"},
                     {name:"催更排行榜",uri:"/urge"},
                     {name:"安利排行榜",uri:"/anli"},
                     {name:"点击排行榜",uri:"/click"},
                     {name:"收藏排行榜",uri:'/collect'},
                    { name: "退出", uri: "/login" }
                ]
            }
        },
        methods: {
            sideHide() {
                this.$emit('hide')
            }
        }
    }

</script>
<style scoped>
    .side-menu {
        height: 100%;
        position: fixed;
        top: 0.9rem;
        width: 100%;
        padding-top: 30px;
        z-index: 200;
    }
    
    .side-menu ul {
        width: 91%;
        background-image: url(http://img3.imgtn.bdimg.com/it/u=198224453,2158072342&fm=23&gp=0.jpg);
        background-size: 100% 100%;
        height: 100%;
        border: 1px solid seagreen;
    }
    
    .side-menu ul li {
        height: 50px;
        border-bottom: 1px dashed #666;
        font-size: 14px;
        line-height: 50px;
        padding: 0 30px 0 20px;
        color: white;
    }
    
    .side-menu ul li i {
        float: right;
        line-height: 50px;
    }
</style>